<template>
  <div :class="{'need-protocol':appInfo.needProtocol}">
    <p class="fs12" v-if="selectedProduct.cycle_pay_flag">下个续费周期按￥{{selectedProduct.cycle_pay_period_price | moneyToyuan}}收取，可随时取消</p>
    <div class="fs12 mt5">
      <template v-if="appInfo.needProtocol">
        <el-checkbox v-model="acceptAgree" class="member-checkbox"></el-checkbox>
        <span>同意</span>
      </template>
      <span class="link-btn protocol" @click="openUrl('vip-protocol.html')">《会员服务协议》</span>
      <span>|</span>
      <template v-if="selectedProduct.cycle_pay_flag">
        <span class="link-btn protocol" @click="openUrl('automatic-renewal.html')">《自动续费协议》</span>
        <span>|</span>
      </template>
      <span class="link-btn" @click="openUrl('invoice.html')"> 支持开发票</span>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ProtocolView',
  props: {
    selectedProduct: {
      require: true
    },
    value: Boolean
  },
  computed: {
    ...mapGetters(['appInfo', 'appCfg']),
    acceptAgree: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    openUrl (url) {
      if (url === 'invoice.html') {
        url = 'http://xzdesktop.cqttech.com/invoice.html'
      } else {
        url = `${this.appCfg.site}/${url}`
      }
      this.$xz('xz_open_url', url)
    }
  }
}
</script>
<style lang="scss" scoped>
.link-btn{
  cursor: pointer;
  &:hover{
    color: #fff;
  }
}
.need-protocol{
  .protocol{
    line-height: 18px;
    color: #2FC670;
    &:hover{
      color: #31B068;
    }
  }
}
.member-checkbox{
  margin-right: 6px;
  /deep/.el-checkbox__inner{
    width: 14px;
    height: 14px;
    background: #5A5A5A;
    border-radius: 2px;
    border: 1px solid #898989;
    &::after{
      top: 1px;
      left: 4px;
    }
  }
}
</style>
